<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../css_pc/bootstrap.min.css" />
    
    <link rel="stylesheet" type="text/css" href="../css_pc/default.css" />
    <title>智慧应用资源池</title>
    <link rel="stylesheet" type="text/css" href="../css_pc/index.css" />
</head>

<body>
    <header class="u-header opacity">
        <div class="container">
            <img class="logo" src="../img_pc/logo-h.png" alt="" />
            <div class="account-wrap">
                <div class="account">
                    <div class="launch">想要发起项目？</div>
                    <div class="wechat">
                        <div class="qr"<img src="" alt="" /></div><img src="../img_pc/ic-wechat.png">登录</div>
                </div>
            </div>
            <div class="main-menu">
                <ul>
                    <li class="active"><a href="">首页</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">动态</a></li>
                    <li><a href="">案例</a></li>
                    <li><a href="">伙伴</a></li>
                    <li><a href="">关于</a></li>
                </ul>
            </div>
        </div>
    </header>
    <section class="">
        <div class="in-lb-bg">
            <ul>
               <li class="active" style="background-image:url(../img_pc/bg-index.jpg)"></li> 
               <li style="background-image:url(../img_pc/bg-index.jpg)"></li> 
               <li style="background-image:url(../img_pc/bg-index.jpg)"></li> 
           </ul>
        </div>
        <div class="board-wrap fix-header">
            <div class="in-lb-navi">
                <div class="container">
                    <ul>
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>

            <div class="board">
                <div class="in-lb-ani in-lb-title">
                    <ul>
                        <li class="active">
                            <div class="container">
                                <div class="title">
                                    <div class="bg style1"></div>
                                    <div class="bg style2"></div>
                                    <div class="txt">111 山区儿童上网计划</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="container">
                                <div class="title">
                                    <div class="bg style1"></div>
                                    <div class="bg style2"></div>
                                    <div class="txt">222 山区儿童上网计划</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="container">
                                <div class="title">
                                    <div class="bg style1"></div>
                                    <div class="bg style2"></div>
                                    <div class="txt">333 山区儿童上网计划</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="body">
                    <div class="container">
                        <div class="left">
                            <div class="txt  in-lb-ani in-lb-txt">
                                <ul>
                                    <li class="active">
                                        11根据后台设置显示<br> 
                                        根据后台设置显示<br>
                                        根据后台设置显示
                                    </li>
                                    <li>
                                        22根据后台设置显示<br> 
                                        根据后台设置显示<br>
                                        根据后台设置显示
                                    </li>
                                    <li>
                                        33根据后台设置显示<br> 
                                        根据后台设置显示<br>
                                        根据后台设置显示
                                    </li>
                                </ul>
                            </div>
                            <div class="btn o">发现更多公益项目</div>
                            <img src="../img_pc/qrcode_1.png">
                        </div>
                        <div class="right">
                            <div class="txt">作为一名关注教育的人士
                                <br> 我希望让孩子们体验更好的教育
                                <br> 我希望成为教育公益事业的发起人
                                <br>
                            </div>
                            <div class="btn w">我要发起项目</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="u-footer">
        <div class="copyright">Copyright c 2015 huodui Inc. 保留所有权利 沪ICP备 13042466号-5</div>
        <div class="contact">邮件：huodui@adream.org 电话：021-1234432转221 <img class="wechat" src="../img_pc/icon-wechat.png">
            <img src="../img_pc/qrcode-2.png">
        </div>
    </footer>
    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/util.js"></script>
    <script>
        var inScroll = null;
        $(function(){
            $('.in-lb-navi ul > li').click(function(){
                if ($(this).hasClass('active')) {
                    return;
                }
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.in-lb-ani').each(function(){
                    $(this).find('ul > li').eq(index).addClass('active').siblings().removeClass('active');
                })

                var prev = $('.in-lb-bg ul > li.active');
                prev.css({
                    left : 'auto',
                    right : '0%'
                });
                setTimeout(function(){
                    prev.animate({
                        left : 'auto',
                        right : '100%'
                    }, 2000);
                }, 200);

                var cur = $('.in-lb-bg ul > li').eq(index);
                cur.css({
                    left : '100%',
                });
                setTimeout(function(){
                    cur.animate({
                        left : '0%',
                    }, 1200)
                }, 200);

                prev.removeClass('active')
                cur.addClass('active')
            })

            inScroll = setInterval(function(){
                triggerScroll()
            }, 4500)
            $('.in-lb-navi ul > li').hover(function(){
                clearInterval(inScroll)
            }, function(){
                inScroll = setInterval(function(){
                    triggerScroll()
                }, 4500)
            });
        })

        function triggerScroll () {
            var index = ($('.in-lb-navi ul > li.active').index() + 1) % $('.in-lb-navi ul > li').length;

            $('.in-lb-navi ul > li').eq(index).click();
        }
    </script>
</body>
</html>
